import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box, MainButton, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';

type GetHelpButtonsProps = {
  color: MainColorType;
  href: string;
};

export const GetHelpButtons = ({ color, href }: GetHelpButtonsProps) => {
  const { t } = useTranslation('fiber');
  return (
    <Box display="flex" alignItems={{ xl: 'center' }} flexDirection={{ sm: 'column', xl: 'row' }}>
      <Box width={{ sm: '100%', xl: '7/12' }} marginBottom={{ sm: 2, lg: undefined }}>
        <Text variant="pLargeBold">{t('helpButtons.description')}</Text>
      </Box>
      <Box width={{ sm: '100%', md: '8/12', lg: '100%', xl: '5/12' }}>
        <MainButton
          colorScheme={color}
          text={t('helpButtons.buttonTitle')}
          dottedShadow="none"
          icon="longArrowRight"
          renderAs="a"
          openInNewTab={true}
          href={href}
        />
      </Box>
    </Box>
  );
};